{extend name="base" /}
{block name="body"} 
<table class="layui-hide" id="lotteryprize" lay-filter="lotteryprize"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete"><i class="fa fa-trash-o"></i>{:__('Multiple choice deletion')}</button>
        <button class="layui-btn layui-btn-sm" lay-event="refresh"><i class="layui-icon layui-icon-refresh-3"></i>{:__('Refresh')}</button>
        <div class="layui-btn-group">
    <a class="layui-btn layui-icon layui-icon-edit layui-btn-sm" id="edits" lay-event="add">{:__('newly added')}</a>
        </div>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-icon layui-icon-edit layui-btn-sm" id="edits" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-sm layui-icon  layui-icon-delete " id="dels" lay-event="del">删除</a>
</script>
<!--新增表单 start-->
<div id="add-mainprize" style="display: none;margin-top: 40px;">
    <form class="layui-form" id="add-form" action="" lay-filter="add-form">

        <input type="hidden" name="id" value="0" id="id">
        <div class="layui-form-item">
            <label class="layui-form-label">奖品内容</label>
            <div class="layui-input-block">
                <input type="text" placeholder="奖品内容" name="content" id="content" style="width: 80%"
                       lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">状&nbsp;&nbsp;态</label>
            <div class="layui-input-block">
                <input type="radio" name="status" value="1" title="正常" checked/>
                <input type="radio" name="status" value="0" title="禁用"/>

            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                    <button class="layui-btn layui-btn-sm" lay-filter="save" lay-submit>保存</button>
                    <button class="layui-btn layui-btn-sm layui-btn-danger close">关闭</button>
            </div>
        </div>
    </form>
</div>

<!--新增表单 end-->
{/block}

{block name="js"}
<script>
    layui.use(['table', 'form'], function () {
        var table = layui.table,
            $ = layui.jquery,
            form = layui.form;
        form.render();

        table.render({
            elem: '#lotteryprize'
            , url: "{:url('lotteryprize/index_json')}"  // 请求数据路由地址
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }], 
            lineStyle: 'height: 100px;',//图片高度
            cellMinWidth: 100,
            size:'lg',even:true
            , title: '用户数据表'
            , cols: [[
                {
                    type: 'checkbox', 
                }, {
                    field: 'id', 
                    title: 'ID', 
                    width: 80, 
                    align: 'center', 
                }, {
                    field: 'uid', 
                    title: 'UID', 
                    width: 80, 
                    align: 'center', 
                }, {
                    field: 'content', 
                    title: '奖品内容', 
                    align: 'center', 
                    width: 400, 
                    fieldTitle: '奖品',
                    expandedMode: 'tips',
                    edit: 'text'
                }, {
                    field: 'create_time', 
                    title: '创建时间', 
                    align: 'center', 
                    width: 160
                }, {
                    field: 'status', 
                    title: '状态', 
                    align: 'center', 
                    width: 80, 
                    templet: function (d) {
                        return d.status ? ' <i class="layui-icon layui-icon-ok-circle" style="font-size: 25px; color: #009688;"></i>' : '<i class="layui-icon layui-icon-close-fill" style="font-size: 25px; color: #FF5722;"></i>';
                    }
                }, {
                    title: '操作', 
                    align: 'center', 
                    toolbar: '#barDemo', 
                    width: 200
                }
            ]]
            , page: true
            , limit: 6
            , text: {none: '{:__('No data available')}'}

        });
        //表单提交
        form.on('submit(save)', function (data) {
        var index = layer.msg('提交中，请稍候', {
        icon: 16,
        time: false,
        shade: 0.3
    });
            params = data.field;
            submit($, params);
            return false;
        });

      // 单元格编辑事件
  table.on('edit(lotteryprize)', function(obj){
    var field = obj.field; // 得到字段
    var value = obj.value; // 得到修改后的值
    var data = obj.data; // 得到所在行所有键值
                   // delete obj.data.image; 
                   // delete obj.data.password; 
    // 编辑后续操作，如提交更新请求，以完成真实的数据更新
             $.ajax({
                url: "{:url('lotteryprize/edit')}?id=" +obj.data.id,
                dataType:'json',
                type: 'POST',
                timeout:5000,
                data:data,
                success:function(res){    
        var load = layer.load(1, {time: 3*1000}); //加载动画 //加载层
                    if(res.code == 0){  
                   layer.msg('编辑成功', {icon: 1,time:3000,anim:6});
                     setTimeout(function () {
                    //parent.location.reload();
                }, 1000);
                    }else{
                    layer.msg(res.msg, {icon: 0});
                    }
                },
                complete:function(XMLHttpRequest,status){
                    if(status!='success'){
                        layer.msg("请求出错，请稍候再试");
                    }
                }.bind(this)
            });
    
    // 其他更新操作
    var update = {};
    update[field] = value;
    obj.update(update);
  });
        // 新增
        function submit($, params) {
            var url = params.id > 0 ? '/lotteryprize/edit' : '/lotteryprize/add';
            $.post(url, params, function (res) {
                if (res.code == 0) {
                    layer.msg(res.msg, {icon: 1});
                    setTimeout(function () {
                        layer.closeAll();   // 关闭弹窗
                        location.reload();  // 页面刷新
                    }, 1500)
                } else {
                    layer.msg(res.msg, {icon: 0})
                }
            }, 'json');
        }

        //头工具栏事件
        table.on('toolbar(lotteryprize)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    // 清空表单
                    document.getElementById('id').value = 0;
                    $("#add-form")[0].reset();
                    layui.form.render();
                    // 打开窗口
                  var title = $(this).html();
                     var width = $(this).data('width');
                     var height = $(this).data('height');
                if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){
                      var width = '90%';
                      var height = '400px';
                     }else{
                        var width = '500px';
                      var height = '400px';
                     };
                // 打开窗口
                layer.open({  
                     type: 1 //Page层类型
                     ,area: [width, height]
                     ,title: title 
                     ,closeBtn: false
                     ,shade: 0.3 //遮罩透明度
                     ,maxmin: true //允许全屏最小化
                     ,anim: 1 //0-6的动画形式，-1不开启
                     ,shadeClose: true
                     ,id: 'layui-id' //设定一个id，防止重复弹出
                     ,moveType: 0 //拖拽模式，0或者1
                     ,content: $("#add-mainprize")
                     });
                    break;
                case 'delete':
                    var data = checkStatus.data;
                    var ids = [];
                    data.forEach(item => {
                        ids.push(item.id);
                    });
                    if (ids <= 0) {
                        return layer.msg('请选择删除项！', {icon: 0});
                    }
                 var index = layer.msg('提交中，请稍候', {
                   icon: 16,
                   time: false,
                   shade: 0.3
                 });
                    $.post('/lotteryprize/del', {id: ids}, function (res) {
                        if (res.code == 0) {
                            layer.msg(res.msg, {icon: 1});
                            setTimeout(function () {
                                location.reload();  // 页面刷新
                            }, 1500)
                        } else {
                            layer.msg(res.msg, {icon: 0});
                        }
                    }, 'json');
                    break;
                case 'refresh':
                    location.reload();
                    break;
            }
        });

        //监听行工具事件
        table.on('tool(lotteryprize)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除么？', function (index) {
                 var index = layer.msg('提交中，请稍候', {
                   icon: 16,
                   time: false,
                   shade: 0.3
                 });
                    $.post('/lotteryprize/del', {id: data.id}, function (res) {
                        if (res.code == 0) {
                            layer.msg(res.msg, {icon: 1});
                            setTimeout(function () {
                                location.reload();  // 页面刷新
                            }, 1500)
                        } else {
                            layer.msg(res.msg, {icon: 0});
                            layer.close(index);
                        }
                    }, 'json')
                });
            } else if (obj.event === 'edit') {
                if (data.length == 0) {
                    return layer.msg('请选择一行！', {icon: 0});
                }
               // 打开窗口
                  var title = $(this).html();
                     var width = $(this).data('width');
                     var height = $(this).data('height');
                if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){
                      var width = '90%';
                      var height = '400px';
                     }else{
                        var width = '500px';
                      var height = '400px';
                     };
                // 打开窗口
                layer.open({  
                     type: 1 //Page层类型
                     ,area: [width, height]
                     ,title: title 
                     ,closeBtn: false
                     ,shade: 0.3 //遮罩透明度
                     ,maxmin: true //允许全屏最小化
                     ,anim: 4 //0-6的动画形式，-1不开启
                     ,shadeClose: true
                     ,id: 'layui-id' //设定一个id，防止重复弹出
                     ,moveType: 0 //拖拽模式，0或者1
                     ,content: $("#add-mainprize")
                     });
                document.getElementById('id').value = data.id;
                document.getElementById('content').value = data.content;
                document.getElementById('status').value = data.status;
            }
        });
    })
    ;


</script>
{/block}